@inject NavigationManager NavigationManager

<div @onclick="ShowDetails" class="credential-card overflow-hidden p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
 dark:bg-gray-800 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
    <div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
        <DisplayFavicon FaviconBytes="@Obj.Logo" Padding="true"></DisplayFavicon>
        <div class="flex items-center justify-center gap-1.5 w-full">
            <div class="text-gray-900 dark:text-gray-100 break-words">@GetServiceName()</div>
            @if (Obj.HasPasskey)
            {
                <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="Has passkey">
                    <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
                </svg>
            }
            @if (Obj.HasAttachment)
            {
                <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="Has attachments">
                    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
                </svg>
            }
        </div>
        <div class="text-gray-500 dark:text-gray-400 break-words w-full text-sm">@GetDisplayText()</div>
    </div>
</div>

@code {
    /// <summary>
    /// Gets or sets the credentials object to show.
    /// </summary>
    [Parameter]
    public required CredentialListEntry Obj { get; set; }

    /// <summary>
    /// Gets the display text for the credential, showing username by default,
    /// falling back to email only if username is null/empty.
    /// </summary>
    private string GetDisplayText()
    {
        var returnValue = string.Empty;

        // Show username if available
        if (!string.IsNullOrEmpty(Obj.Username))
        {
            returnValue = Obj.Username;
        }

        // Show email if username is not available
        if (!string.IsNullOrEmpty(Obj.Email))
        {
            returnValue = Obj.Email;
        }

        return returnValue;
    }

    /// <summary>
    /// Get the service name for a credential.
    /// </summary>
    private string GetServiceName()
    {
        var returnValue = "Untitled";

        if (!string.IsNullOrEmpty(Obj.Service))
        {
            returnValue = Obj.Service;
        }

        return returnValue;
    }

    /// <summary>
    /// Navigate to the details page of the credential.
    /// </summary>
    private void ShowDetails()
    {
        // Redirect to view page instead for now.
        NavigationManager.NavigateTo($"/credentials/{Obj.Id}");
    }
}
